<template>
  <div class="app">
    <!-- <HeaderComp title="选择支行"
                class="head-top" /> -->
    <!-- <van-nav-bar title="选择支行"
                 fixed
                 left-arrow
                 @click-left="$emit('onBranchbank1')" /> -->
    <div class="header-box head-top">
      <van-icon name="arrow-left"
                size="24"
                @click="$emit('onBranchbank1')" />
      <div class="header-item">选择支行</div>
      <van-icon name="arrow-left"
                size="24"
                style="visibility: hidden;" />
    </div>
    <div class="content">
      <div class="search-father">
        <div class="search-box">
          <van-icon name="search"></van-icon>
          <input type="text"
                 v-model="query"
                 placeholder="请输入关键字模糊搜索"
                 @change="getBranchBankList" />
        </div>
      </div>
      <div class="bank-list">
        <van-list v-model="loading"
                  :finished="finished"
                  :error.sync="error"
                  finished-text="没有更多了"
                  error-text="请求失败，点击重新加载"
                  @load="onLoad">
          <van-checkbox-group v-model="result">
            <van-cell-group>
              <van-cell v-for="(item, index) in list"
                        clickable
                        :key="index"
                        :title="item.bankName"
                        @click="toggle(item, index)">
                <template #right-icon>
                  <van-checkbox :name="item.id"
                                checked-color="#feb518"
                                ref="checkboxes" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-checkbox-group>
        </van-list>
      </div>
      <div class="comfirm"
           v-if="false">
        <van-button block
                    type="info"
                    color="#FFB72F"
                    @click="nextStep"
                    class="next-step-btn">确认</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getBranchBankList } from "@/api/bank";
export default {
  name: "SelectBank1",
  components: {
    HeaderComp: () => import("@/components/HeaderComps"),
  },
  props: {
    bankTypeId: String,
    bankCity: String,
  },
  data () {
    return {
      error: false,
      loading: false,
      finished: false,
      value: "",
      list: [],
      result: [],
      page: 1,
      pages: 10,
      total: 1,
      query: "",
    };
  },
  mounted () {
    // console.log(this.bankTypeId, 'bankTypeld---')
    console.log(this.bankCity, 'bankCity--')
    getBranchBankList(1, this.query, {
      bankTypeId: this.bankTypeId,
      bankCity: this.bankCity,
    }).then((res) => {
      if (res.code == 200) {
        let dataList = res.data.records;
        this.total = res.data.total;
        this.pages = res.data.pages;
        this.list = dataList;
      }
    });
  },
  methods: {
    getBranchBankList () {
      getBranchBankList(1, this.query, {
        bankTypeId: this.bankTypeId,
        bankCity: this.bankCity,
      }).then((res) => {
        if (res.code == 200) {
          let dataList = res.data.records;
          this.list = dataList;
        }
      });
    },
    // 上拉加载下一页
    onLoad () {
      if (this.page > this.pages) {
        this.finished = true;
      } else {
        this.page++;
        getBranchBankList(this.page, this.query, {
          bankTypeId: this.bankTypeId,
          bankCity: this.bankCity,
        }).then((res) => {
          if (res.code == 200) {
            let dataList = res.data.records;
            dataList.forEach((i) => {
              this.list.push(i);
            });
          }
        });
        this.loading = false;
      }
    },
    // 选择支行
    toggle (item, index) {
      //   this.$refs.checkboxes[index].toggle();
      //   this.$store.commit("setBranchBankId1", item);
      //   setTimeout(() => {
      //     this.$router.go(-1);
      //   }, 500);
      setTimeout(() => {
        this.$emit('onBranchbank1', item);
      }, 500);

      console.log('onBranchbank1')

    },
  },
};
</script>

<style lang="less" scoped>
.header-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px;
  border-bottom: 1px solid #d7d7d7;
  font-size: 36px;
  background: #fff;
  .header-item {
    font-weight: 500;
    color: #131313;
  }
}
.app {
  background: #f9f9f9;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  padding-top: 236px;
}
.content {
  height: 100%;
  .search-father {
    background: #f9f9f9;
    padding: 24px 0;
    position: fixed;
    top: 112px;
    left: 0;
    right: 0;
    z-index: 98;
    .search-box {
      display: flex;
      align-items: center;
      background: #fff;
      width: 80%;
      height: 76px;
      border-radius: 15px;
      margin: 0 auto;
      font-size: 31px;
      padding-left: 15px;
      input {
        border: none;
        margin-left: 10px;
        flex: 1;
      }
    }
  }
  .bank-list {
    padding-bottom: 100px;
  }
  .comfirm {
    padding: 90px 75px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 98;
    background: #fff;
  }
}
</style>
